<template>
    <div class="components-container" style='height:100vh' >
        <div class='chart-container'>
            <section class="detail-header">
                <div class="col-sm-12 console-title">
                    <h5><span class="title">业务监控</span></h5>
                </div>
            </section>
            <section class="chartMain">
              <div class="setTime">
                <el-button @click="clickRange(1,0,'click')" type="info" size="mini" class="setTimebtn" v-bind:class="{ active: is1hActive }">1h</el-button>
                <el-button @click="clickRange(2,0,'click')" type="info" size="mini" class="setTimebtn" v-bind:class="{ active: is2hActive }">2h</el-button>
                <el-button @click="clickRange(4,0,'click')" type="info" size="mini" class="setTimebtn" v-bind:class="{ active: is4hActive }">4h</el-button>
                <el-button @click="clickRange(8,0,'click')" type="info" size="mini" class="setTimebtn" v-bind:class="{ active: is8hActive }">8h</el-button>
                <el-button @click="clickRange(12,0,'click')" type="info" size="mini" class="setTimebtn" v-bind:class="{ active: is12hActive }">12h</el-button>
                <el-button @click="clickRange(24,0,'click')" type="info" size="mini" class="setTimebtn" v-bind:class="{ active: is24hActive }">24h</el-button>
                <el-button @click="clickRange(48,0,'click')" type="info" size="mini" class="setTimebtn" v-bind:class="{ active: is48hActive }">48h</el-button>
                <el-button @click="clickRange(0,24,'click')" type="info" size="mini" class="setTimebtn" v-bind:class="{ active: is1ddActive }">+1d</el-button>
                <el-button @click="clickRange(0,-24,'click')" type="info" size="mini" class="setTimebtn" v-bind:class="{ active: is1dlActive }">-1d</el-button>
                <el-button @click="clickRange(0,168,'click')" type="info" size="mini" class="setTimebtn" v-bind:class="{ active: is7ddActive }">+7d</el-button>
                <el-button @click="clickRange(0,-168,'click')" type="info" size="mini" class="setTimebtn" v-bind:class="{ active: is7dlActive }">-7d</el-button>
                <el-button @click="clickRange(0,0,null,null)" type="info" size="mini" class="setTimebtn" v-bind:class="{ active: isnowlActive }">now</el-button>
                &nbsp;&nbsp;               
                <el-date-picker style="width: 300px;" size="small" format="yyyy-MM-dd HH:mm" @change="pickTime" v-model="value" type="datetimerange" placeholder="选择时间范围"></el-date-picker>
                <el-button  size="small"  @click="moduleConf" v-show="setconf">设置</el-button>
                <el-popover
                  ref="tip"
                  placement="top-start"
                  width="300"
                  trigger="hover"
                  content="基线值：最近一个月的4个每周几的数据加权求和平均计算得出。例如：今天是2016-12-02（周五），今天整天基线数据的算法是最近四个周五（2016-11-04，2016-11-11，2016-11-18，2016-11-25）的每个分钟数据的加权求和或平均，权重值依次为1，2，3，4。如：当前时间为19:56分设为value，前四周对应的19:56分数据（由远及近）分别为A,B,C,D，则value = (A+2B+3C+4D) / 10。">
                </el-popover>
                <i class="el-icon-warning" v-popover:tip ></i>
              </div>
              <div class="chartShow">
                <div class="chartChildItem"  v-for="(item,index) in chartList" :key="index" >
                  <div class="chart-panel" :id="item.title" ></div>
                </div>
              </div>
            </section>
            <section>
              <div class="mapTitle">各省性能</div>    
              <div class="subMapTitle">{{date}}</div>    
              <div class="chart" id="charMap" style='height:400px'></div>  
            </section>            
            <el-dialog title="频率设置" :visible.sync="frequencyDialogVislble" class="customDialog team" :lock-scroll="false">
                <div class="scoreContainer tagCategory">
                  <el-form :model="updateForm" ref="updateForm" label-width="120px" class="demo-updateForm">
                    <el-form-item label="刷新频率">
                      <el-select v-model="updateForm.frequency">
                        <el-option v-for="item in options" :key="item.frequency" :label="item.name" :value="item.frequency"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="模块">
                      <el-select v-model="updateForm.module" @change="changeModule">
                        <el-option v-for="item in modules" :key="item.module" :label="item.name" :value="item.module"></el-option>
                      </el-select>
                    </el-form-item>                    
                    <el-form-item label="变化率(%)" prop="rate">
                        <el-input v-model="updateForm.rate" type="number"></el-input>
                    </el-form-item>
                    <el-form-item label="通知对象" prop="transfer">
                      <el-transfer 
                        filterable
                       :footer-format="{
                          noChecked: '共${total}项',
                          hasChecked: '已选${checked}/${total} 项'
                        }"
                       :titles="['未选联系人组', '已选联系人组']"  
                       v-model="contactIds" 
                       :data="contactsGroupList"> 
                      </el-transfer>
                    </el-form-item>
                  </el-form>
                </div>
                <span slot="footer" class="dialog-footer">             
                  <el-button type="primary" @click="creatSubmit('updateForm')">确 定</el-button>
                </span>
            </el-dialog>
        </div>
      </div>
</template>

<script>
import { getList, changeFrequency, toIndex, getMapData, getMonitorByModule } from '@/api/buissnesMonitorData'
import { chinaJson } from '@/api/dashboard'
import { getAlarmContactsGroupList } from '@/api/alarmRulesData'
import echarts from 'echarts'

export default {
  data() {
    return {
      arr: [],
      chartList: [],
      is1hActive: false,
      is2hActive: false,
      is4hActive: false,
      is8hActive: false,
      is12hActive: false,
      is24hActive: false,
      is48hActive: false,
      is1ddActive: false,
      is1dlActive: false,
      is7ddActive: false,
      is7dlActive: false,
      isnowlActive: false,
      frequencyDialogVislble: false,
      value: null,
      timeTag: 0,
      dayTag: 0,
      loading: false,
      setconf: false,
      listQuery: {
        page: 1,
        limit: 20
      },
      options: [{
        frequency: 30,
        name: '30秒'
      }, {
        frequency: 60,
        name: '1分'
      }],
      modules: [{
        module: '全局',
        name: '全局'
      }, {
        module: '推荐数量',
        name: '推荐数量'
      }, {
        module: '回单数量',
        name: '回单数量'
      }, {
        module: '登录数量',
        name: '登录数量'
      }, {
        module: '订单数量',
        name: '订单数量'
      }, {
        module: '支付成功率',
        name: '支付成功率'
      }, {
        module: '发货',
        name: '发货'
      }],
      updateForm: {
        id: '',
        frequency: '',
        rate: '',
        module: '',
        updateTime: ''
      },
      contactIds: [],
      contactsGroupList: [],
      interval: null,
      isFlag: true,
      frequency: 1000,
      module: '全局',
      date: null
    }
  },
  mounted() {
    this.index(this.timeTag, this.dayTag, null, null)
    this.getContacts()
  },
  destroyed() {
    clearInterval(this.interval)
    this.interval = null
  },
  methods: {
    getContacts() {
      getAlarmContactsGroupList().then(response => {
        if (response.data.code === 0) {
          response.data.data.forEach(function(element) {
            this.contactsGroupList.push({
              key: element.id,
              label: element.name
            })
          }, this)
        }
      })
    },
    index(timeTag, dayTag, type, value) { // 页面初始化
      console.log('初始化数据')
      this.loading = true
      this.createInterval(timeTag, dayTag, type, value) // 定时任务执行
      this.removeInterval(timeTag, dayTag, type, value) // 定时任务清除
      this.showChart(timeTag, dayTag, type, value) // 开始初始化报表
    },
    clickRange(timeTag, dayTag, type, value) { // 页面初始化
      this.loading = true
      this.value = ''
      this.createInterval(timeTag, dayTag, type, value) // 定时任务执行
      this.removeInterval(timeTag, dayTag, type, value) // 定时任务清除
      this.showChart(timeTag, dayTag, type, value)
    },
    timeRange(timeTag, dayTag, type, value) { // 页面初始化
      this.loading = true
      this.createInterval(timeTag, dayTag, type, value) // 定时任务执行
      this.removeInterval(timeTag, dayTag, type, value) // 定时任务清除
      this.showChart(timeTag, dayTag, type, value)
    },
    createInterval(timeTag, dayTag, type, value) { // 创建任务
      var _this = this
      if (timeTag === 0 && dayTag === 0 && type === null && value === null) {
        if (this.interval === null) {
          console.log('开启定时任务')
          var frequencyQuery = { }
          toIndex(frequencyQuery).then(response => {
            _this.setconf = response.data.setconf
            _this.frequency = response.data.data.frequency * 1000
            _this.interval = setInterval(function() {
              _this.showChart(timeTag, dayTag, type, value)
            }, _this.frequency)
          })
        }
      }
    },
    removeInterval(timeTag, dayTag, type, value) { // 关闭任务
      if (type !== null && value !== null) {
        console.log('清除定时任务')
        clearInterval(this.interval)
        this.interval = null
      }
    },
    showChart(timeTag, dayTag, type, value) {
      // 如果改变状态
      this.changeActive(timeTag, dayTag, type)
      const _this = this
      this.timeTag = timeTag
      this.dayTag = this.dayTag + dayTag
      var listQuery = { timeTag: this.timeTag, dayTag: this.dayTag, value: value }
      if (type === null && value === null) { // 初始化 按钮now
        listQuery = { timeTag: 0, dayTag: 0, value: value }
      }
      getList(listQuery).then(response => {
        var json = response.data.data
        _this.chartList = json.lineCharts
        _this.chartList.forEach(function(element, index) {
          const legendData = []
          const seriesData = []
          var _time = []
          const title = element.title
          const unit = element.unit
          const subTitles = element.subTitles
          const datas = element.datas
          var k = 0
          subTitles.forEach(function(obj, index) {
            legendData.push(obj)
          })
          if (title === '支付成功率') {
            datas.forEach(function(item) {
              const timeData1 = []
              const timeData2 = []
              const timeData3 = []
              const time = []
              for (var key in item) {
                var now = new Date()
                now.setTime(item[key][0])
                var year = now.getFullYear()
                var month = now.getMonth() + 1 > 9 ? now.getMonth() + 1 : '0' + (now.getMonth() + 1)
                var date = now.getDate() > 9 ? now.getDate() : '0' + now.getDate()
                var hour = now.getHours() > 9 ? now.getHours() : '0' + now.getHours()
                var minute = now.getMinutes() > 9 ? now.getMinutes() : '0' + now.getMinutes()
                var timeStr = year + '/' + month + '/' + date + ' \n ' + hour + ':' + minute
                time.push(timeStr)
                timeData1.push((parseFloat(item[key][1]) * 100).toFixed(1))
                timeData2.push((parseFloat(item[key][2]) * 100).toFixed(1))
                timeData3.push((parseFloat(item[key][3]) * 100).toFixed(1))
              }
              _time = time
              const seriesObj1 = { name: subTitles[0], type: 'line', symbol: 'none', data: timeData1 }
              const seriesObj2 = { name: subTitles[1], type: 'line', symbol: 'none', data: timeData2 }
              const seriesObj3 = { name: subTitles[2], type: 'line', symbol: 'none', data: timeData3 }
              seriesData.push(seriesObj1)
              seriesData.push(seriesObj2)
              seriesData.push(seriesObj3)
            }, _this)
          } else if (title === '发货') {
            datas.forEach(function(item) {
              const timeData1 = []
              const timeData2 = []
              const time = []
              for (var key in item) {
                var now = new Date()
                now.setTime(item[key][0])
                var year = now.getFullYear()
                var month = now.getMonth() + 1 > 9 ? now.getMonth() + 1 : '0' + (now.getMonth() + 1)
                var date = now.getDate() > 9 ? now.getDate() : '0' + now.getDate()
                var hour = now.getHours() > 9 ? now.getHours() : '0' + now.getHours()
                var minute = now.getMinutes() > 9 ? now.getMinutes() : '0' + now.getMinutes()
                var timeStr = year + '/' + month + '/' + date + ' \n ' + hour + ':' + minute
                time.push(timeStr)
                timeData1.push(parseFloat(item[key][1]))
                timeData2.push(parseFloat(item[key][2]))
              }
              _time = time
              const seriesObj1 = { name: subTitles[0], type: 'line', symbol: 'none', data: timeData1 }
              const seriesObj2 = { name: subTitles[1], type: 'line', symbol: 'none', data: timeData2 }
              seriesData.push(seriesObj1)
              seriesData.push(seriesObj2)
            }, _this)
          } else {
            datas.forEach(function(item) {
              const timeData = []
              const time = []
              for (var key in item) {
                var now = new Date()
                now.setTime(key)
                var year = now.getFullYear()
                var month = now.getMonth() + 1 > 9 ? now.getMonth() + 1 : '0' + (now.getMonth() + 1)
                var date = now.getDate() > 9 ? now.getDate() : '0' + now.getDate()
                var hour = now.getHours() > 9 ? now.getHours() : '0' + now.getHours()
                var minute = now.getMinutes() > 9 ? now.getMinutes() : '0' + now.getMinutes()
                var timeStr = year + '/' + month + '/' + date + ' \n ' + hour + ':' + minute
                time.push(timeStr)
                timeData.push(parseFloat(item[key]).toFixed(1))
              }
              _time = time
              const seriesObj = { name: subTitles[k++], type: 'line', symbol: 'none', data: timeData }
              seriesData.push(seriesObj)
            }, _this)
          }
          setTimeout(function() {
            const product = echarts.init(document.getElementById(title))
            const option = {
              animation: false,
              title: {
                left: 'center',
                text: title,
                textStyle: {
                  fontSize: 15
                }
              },
              tooltip: {
                trigger: 'axis'
              },
              legend: {
                top: 'bottom',
                data: legendData
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: _time,
                formatter: function(_time) {
                }
              },
              yAxis: {
                type: 'value',
                show: true,
                name: unit
              },
              dataZoom: [{
                type: 'inside'
              }],
              grid: {
                left: 10,
                right: 10,
                height: 240,
                containLabel: true
              },
              series: seriesData
            }
            product.setOption(option)
            _this.loading = false
          }, 1000)
        })
        var listQuery = { }
        getMapData(listQuery).then(response => {
          const rpdata = response.data
          _this.date = rpdata.date
          const mapOption = {
            tooltip: {
              trigger: 'item',
              formatter: function(params, ticket, callback) {
                if (params) {
                  var str = params.seriesName + '<br/><span style=display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params.color + '></span>' + params.name + '：'
                  var value = '暂无'
                  if (params.value + 1) {
                    value = params.value
                    if (params.seriesName.indexOf('时间') > -1) {
                      value += 'ms'
                    } else {
                      value += '%'
                    }
                  }
                  str += value
                  return str
                }
              }
            },
            legend: {
              orient: 'horizontal',
              left: 'center',
              data: ['响应时间', '成功率'],
              selected: {
                '成功率': false
              },
              selectedMode: 'single',
              shadowColor: 'red'
            },
            visualMap: {
              type: 'piecewise',
              pieces: [{
                gt: 5000,
                label: '>5s',
                color: '#FF3300'
              }, {
                gt: 2000,
                lte: 5000,
                label: '2s~5s',
                color: '#FF770B'
              }, {
                gt: 1000,
                lte: 2000,
                label: '1s~2s',
                color: '#FFBB17'
              }, {
                gt: 800,
                lte: 1000,
                label: '0.8s~1s',
                color: '#FFFF22'
              }, {
                gt: 600,
                lte: 800,
                label: '0.6s~0.8s',
                color: '#BBDD22'
              }, {
                gt: 400,
                lte: 600,
                label: '0.4s~0.6s',
                color: '#77BB22'
              }, {
                lte: 400,
                label: '<=0.4s',
                color: '#339922'
              }],
              left: 'left',
              top: 'bottom'
            },
            series: [{
              name: '响应时间',
              type: 'map',
              map: 'china',
              roam: true,
              label: {
                normal: {
                  show: true
                },
                emphasis: {
                  show: true
                }
              },
              data: rpdata.dashBoardInfo.mapChart.dataSeries
            },
            {
              name: '成功率',
              type: 'map',
              map: 'china',
              roam: true,
              label: {
                normal: {
                  show: true
                },
                emphasis: {
                  show: true
                }
              },
              data: rpdata.dashBoardInfo.successMapChart.dataSeries
            }]
          }
          chinaJson().then(response => {
            echarts.registerMap('china', response.data)
            const mapproduct = echarts.init(document.getElementById('charMap'))
            mapproduct.setOption(mapOption)
            mapproduct.on('legendselectchanged', function(params) {
              if (params.name === '响应时间') {
                mapproduct.setOption({ visualMap: {
                  pieces: [{
                    gt: 5000,
                    label: '>5s',
                    color: '#FF3300'
                  }, {
                    gt: 2000,
                    lte: 5000,
                    label: '2s~5s',
                    color: '#FF770B'
                  }, {
                    gt: 1000,
                    lte: 2000,
                    label: '1s~2s',
                    color: '#FFBB17'
                  }, {
                    gt: 800,
                    lte: 1000,
                    label: '0.8s~1s',
                    color: '#FFFF22'
                  }, {
                    gt: 600,
                    lte: 800,
                    label: '0.6s~0.8s',
                    color: '#BBDD22'
                  }, {
                    gt: 400,
                    lte: 600,
                    label: '0.4s~0.6s',
                    color: '#77BB22'
                  }, {
                    lte: 400,
                    label: '<=0.4s',
                    color: '#339922'
                  }],
                  left: 'left',
                  top: 'bottom'
                },
                  series: [{
                    name: '响应时间',
                    type: 'map',
                    map: 'china',
                    roam: true,
                    label: {
                      normal: {
                        show: true
                      },
                      emphasis: {
                        show: true
                      }
                    },
                    data: rpdata.dashBoardInfo.mapChart.dataSeries
                  },
                  {
                    name: '成功率',
                    type: 'map',
                    map: 'china',
                    roam: true,
                    label: {
                      normal: {
                        show: true
                      },
                      emphasis: {
                        show: true
                      }
                    },
                    data: rpdata.dashBoardInfo.successMapChart.dataSeries
                  }] })
              } else {
                mapproduct.setOption({ visualMap: {
                  pieces: [{
                    lt: 95,
                    label: '<95%',
                    color: '#FF3300'
                  }, {
                    gte: 95,
                    lt: 96.5,
                    label: '95%~96.5%',
                    color: '#FF9911'
                  }, {
                    gte: 96.5,
                    lt: 98,
                    label: '96.5%~98%',
                    color: '#FFFF22'
                  }, {
                    gte: 98,
                    lt: 100,
                    label: '98%~99.9%',
                    color: '#99CC22'
                  }, {
                    gte: 100,
                    label: '100%',
                    color: '#339922'
                  }],
                  left: 'left',
                  top: 'bottom'
                },
                  series: [{
                    name: '响应时间',
                    type: 'map',
                    map: 'china',
                    roam: true,
                    label: {
                      normal: {
                        show: true
                      },
                      emphasis: {
                        show: true
                      }
                    },
                    data: rpdata.dashBoardInfo.mapChart.dataSeries
                  },
                  {
                    name: '成功率',
                    type: 'map',
                    map: 'china',
                    roam: true,
                    label: {
                      normal: {
                        show: true
                      },
                      emphasis: {
                        show: true
                      }
                    },
                    data: rpdata.dashBoardInfo.successMapChart.dataSeries
                  }] })
              }
            })
          })
        })
      })
    },
    pickTime(val) {
      if (val === '') {
        return
      }
      var start = val.split(' - ')[0]
      var end = val.split(' - ')[1]
      var timestamp1 = Date.parse(new Date(start))
      var timestamp2 = Date.parse(new Date(end))
      if (timestamp2 - timestamp1 > 2 * 24 * 60 * 60 * 1000) {
        this.$message({
          message: '选择的时间间隔不能超过2天',
          type: 'warning'
        })
        return
      }
      this.timeRange(0, 0, 'change', val)
    },
    changeModule(val) {
      var listQuery = { module: val }
      getMonitorByModule(listQuery).then(response => {
        var monitor = response.data.data
        if (monitor === undefined) {
          this.updateForm.rate = null
        } else {
          this.updateForm.rate = monitor.rate
        }
        this.contactIds = response.data.contactIds
      })
    },
    moduleConf() {
      var listQuery = { module: '全局' }
      getMonitorByModule(listQuery).then(response => {
        var monitor = response.data.data
        this.contactIds = response.data.contactIds
        this.updateForm = {
          id: monitor.id,
          frequency: monitor.frequency,
          rate: monitor.rate,
          module: monitor.module,
          updateTime: monitor.updateTime
        }
      })
      this.frequencyDialogVislble = true
    },
    creatSubmit(updateForm) {
      this.$refs[updateForm].validate((valid) => {
        if (valid) {
          var tip = '确认修改？'
          this.$confirm(tip, '提示', {
            type: 'warning'
          })
          .then(_ => {
            var jsonData = {}
            jsonData.frequency = this.updateForm.frequency
            jsonData.rate = this.updateForm.rate
            jsonData.module = this.updateForm.module
            jsonData.contactId = this.contactIds === undefined ? null : this.contactIds.join(',')
            changeFrequency(jsonData).then(response => {
              this.frequencyDialogVislble = false
            })
          })
        .catch(_ => {})
        }
      })
    },
    changeActive(timeTag, dayTag, type) {
      if (type === 'change') {
        this.is1hActive = false
        this.is2hActive = false
        this.is4hActive = false
        this.is8hActive = false
        this.is12hActive = false
        this.is24hActive = false
        this.is48hActive = false
        this.is1ddActive = false
        this.is1dlActive = false
        this.is7ddActive = false
        this.is7dlActive = false
        this.isnowlActive = false
      }
      if (timeTag === 1) {
        this.is1hActive = true
        this.is2hActive = false
        this.is4hActive = false
        this.is8hActive = false
        this.is12hActive = false
        this.is24hActive = false
        this.is48hActive = false
        this.is1ddActive = false
        this.is1dlActive = false
        this.is7ddActive = false
        this.is7dlActive = false
        this.isnowlActive = false
      } else if (timeTag === 2) {
        this.is1hActive = false
        this.is2hActive = true
        this.is4hActive = false
        this.is8hActive = false
        this.is12hActive = false
        this.is24hActive = false
        this.is48hActive = false
        this.is1ddActive = false
        this.is1dlActive = false
        this.is7ddActive = false
        this.is7dlActive = false
        this.isnowlActive = false
      } else if (timeTag === 4) {
        this.is1hActive = false
        this.is2hActive = false
        this.is4hActive = true
        this.is8hActive = false
        this.is12hActive = false
        this.is24hActive = false
        this.is48hActive = false
        this.is1ddActive = false
        this.is1dlActive = false
        this.is7ddActive = false
        this.is7dlActive = false
        this.isnowlActive = false
      } else if (timeTag === 8) {
        this.is1hActive = false
        this.is2hActive = false
        this.is4hActive = false
        this.is8hActive = true
        this.is12hActive = false
        this.is24hActive = false
        this.is48hActive = false
        this.is1ddActive = false
        this.is1dlActive = false
        this.is7ddActive = false
        this.is7dlActive = false
        this.isnowlActive = false
      } else if (timeTag === 12) {
        this.is1hActive = false
        this.is2hActive = false
        this.is4hActive = false
        this.is8hActive = false
        this.is12hActive = true
        this.is24hActive = false
        this.is48hActive = false
        this.is1ddActive = false
        this.is1dlActive = false
        this.is7ddActive = false
        this.is7dlActive = false
        this.isnowlActive = false
      } else if (timeTag === 24) {
        this.is1hActive = false
        this.is2hActive = false
        this.is4hActive = false
        this.is8hActive = false
        this.is12hActive = false
        this.is24hActive = true
        this.is48hActive = false
        this.is1ddActive = false
        this.is1dlActive = false
        this.is7ddActive = false
        this.is7dlActive = false
        this.isnowlActive = false
      } else if (timeTag === 48) {
        this.is1hActive = false
        this.is2hActive = false
        this.is4hActive = false
        this.is8hActive = false
        this.is12hActive = false
        this.is24hActive = false
        this.is48hActive = true
        this.is1ddActive = false
        this.is1dlActive = false
        this.is7ddActive = false
        this.is7dlActive = false
        this.isnowlActive = false
      } else if (dayTag === 24) {
        this.is1hActive = true
        this.is2hActive = false
        this.is4hActive = false
        this.is8hActive = false
        this.is12hActive = false
        this.is24hActive = false
        this.is48hActive = false
        this.is1ddActive = true
        this.is1dlActive = false
        this.is7ddActive = false
        this.is7dlActive = false
        this.isnowlActive = false
      } else if (dayTag === -24) {
        this.is1hActive = false
        this.is2hActive = false
        this.is4hActive = false
        this.is8hActive = false
        this.is12hActive = false
        this.is24hActive = false
        this.is48hActive = false
        this.is1ddActive = false
        this.is1dlActive = true
        this.is7ddActive = false
        this.is7dlActive = false
        this.isnowlActive = false
      } else if (dayTag === 168) {
        this.is1hActive = false
        this.is2hActive = false
        this.is4hActive = false
        this.is8hActive = false
        this.is12hActive = false
        this.is24hActive = false
        this.is48hActive = false
        this.is1ddActive = false
        this.is1dlActive = false
        this.is7ddActive = true
        this.is7dlActive = false
        this.isnowlActive = false
      } else if (dayTag === -168) {
        this.is1hActive = false
        this.is2hActive = false
        this.is4hActive = false
        this.is8hActive = false
        this.is12hActive = false
        this.is24hActive = false
        this.is48hActive = false
        this.is1ddActive = false
        this.is1dlActive = false
        this.is7ddActive = false
        this.is7dlActive = true
        this.isnowlActive = false
      } else if (type === null) {
        this.is1hActive = false
        this.is2hActive = false
        this.is4hActive = false
        this.is8hActive = false
        this.is12hActive = false
        this.is24hActive = false
        this.is48hActive = false
        this.is1ddActive = false
        this.is1dlActive = false
        this.is7ddActive = false
        this.is7dlActive = false
        this.isnowlActive = true
      }
    }
  }
}
</script>
<style  lang="scss" >
.detail-header{
    padding: 0 15px;
    margin-bottom: 10px;
    overflow: hidden;
    .console-title{
        padding: 16px 0px;
        min-height: 30px;
        position: relative;
        h5{
            display: inline-block;
            text-indent: 2;
            border-left: 2px solid #88B7E0;
            margin: 8px 0;
            margin-right: 8px;
            vertical-align: top;
            .title{padding: 0 10px;}
            .btn-xs{
                font-size: 12px;
                padding: 2px 8px;
                height: 20px;
                line-height: 14px;
            }
        }
    }
}
.chart-container{
  width: 100%;
  height: 80%;
  .chartChose{
    margin-bottom: 20px;
    padding: 10px 0 20px;
    border-bottom:1px solid #eee;
  }
  .chartShow{
    overflow: hidden;
    margin-top: 20px;
  }
  .chartChildItem{
    height: 400px;
    width: 33%;
    left: 0;
    float: left;
    position: relative;
    .chart-panel{
      height: 350px;
      width: 100%;
      left: 0;
      position: relative;

    }
  }
}
.setTime{
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
  .setTimebtn{
    background: #666;
    padding: 4px 10px;
    border: none;
    border-radius: 0;
  }
  .active{
    background: #222;
  }
  .datePicker{
    margin-left: 10px;
  }
}
.mapTitle{
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  padding-bottom: 20px;  
}
.subMapTitle{
  text-align: center;
  padding-bottom: 20px;
}
</style> 